<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
		<title>放大镜</title>
		<link rel="stylesheet" href="./css/style.css" />
		<script type="text/javascript" src='./js/jquery.js'></script>
		<script type="text/javascript" src='./js/zoom.js'></script>
		<script type="text/javascript">
		$(function(){
			$('#zoom').hdzoom({
				offsetX:20,
				offsetY:10
			})
		})	
		</script>
	</head>
	<body>
		<div id="zoom">
			<ul class="bigimg">
				<li>
					<img src="./imgs/bigimg1.jpg" />
				</li>
				<li>
					<img src="./imgs/bigimg2.jpg" />
				</li>
				<li>
					<img src="./imgs/bigimg3.jpg" />
				</li>
				<li>
					<img src="./imgs/bigimg1.jpg" />
				</li>
				<li>
					<img src="./imgs/bigimg2.jpg" />
				</li>
				<li>
					<img src="./imgs/bigimg3.jpg" />
				</li>
				<li>
					<img src="./imgs/bigimg1.jpg" />
				</li>
				<li>
					<img src="./imgs/bigimg2.jpg" />
				</li>
				<li>
					<img src="./imgs/bigimg3.jpg" />
				</li>
			</ul>
			<div class="smallimg">
				<ul>
					<li>
						<img src="./imgs/small1.jpg" />
					</li>
					<li>
						<img src="./imgs/small2.jpg" />
					</li>
					<li>
						<img src="./imgs/small3.jpg" />
					</li>
					<li>
						<img src="./imgs/small1.jpg" />
					</li>
					<li>
						<img src="./imgs/small2.jpg" />
					</li>
					<li>
						<img src="./imgs/small3.jpg" />
					</li>
					<li>
						<img src="./imgs/small1.jpg" />
					</li>
					<li>
						<img src="./imgs/small2.jpg" />
					</li>
					<li>
						<img src="./imgs/small3.jpg" />
					</li>
				</ul>
				<p class='slide'></p>
			</div>
			<div class="thumbArea">
				<span class="prev"></span>
				<span class="next"></span>
				<div class="thumbAll">
					<ul class='thumb'>
						<li class='activeThumb'>
							<img src="./imgs/thumb1.jpg" />
						</li>
						<li>
							<img src="./imgs/thumb2.jpg" />
						</li>
						<li>
							<img src="./imgs/thumb3.jpg" />
						</li>
						<li>
							<img src="./imgs/thumb1.jpg" />
						</li>
						<li>
							<img src="./imgs/thumb2.jpg" />
						</li>
						<li>
							<img src="./imgs/thumb3.jpg" />
						</li>
						<li>
							<img src="./imgs/thumb1.jpg" />
						</li>
						<li>
							<img src="./imgs/thumb2.jpg" />
						</li>
						<li>
							<img src="./imgs/thumb3.jpg" />
						</li>
					</ul>
				</div>
			</div>
		</div>
	</body>

</html>